<template>
  <section class="car-box base-main">
    <!--编辑-->
    <div class="title bgcFFF line-top pdlr15 line-bottom">
      <p>购物车商品：{{total}}件 <span class="flr" @click="handleEditorCar">{{editorText}}</span></p>
    </div>
    <!--编辑-->

    <!--列表-->
    <div class="car-list">
      <!--购物车无商品-->
      <div class="none text-c color7A7B82" v-if="carList.length <= 0">
        <img src="../../assets/img/icon_none_car.png" alt="">
        <p>购物车还是空的</p>
        <p>快去挑几件喜欢的商品吧</p>
        <p class="btn">
          <span>去逛逛</span>
        </p>
      </div>
      <!--购物车无商品-->

      <!--购物车有商品-->
      <div class="non-empty" v-if="carList.length > 0">
        <ProductCar
          :carList="carList"
          :checkedAll="checkedAllIdList"
          @send-editor="sendEditor"
          @send-minus="sendMinus"
          @send-add="sendAdd"
          @send-product-id="sendProductId"
        ></ProductCar>
      </div>
      <!--购物车有商品-->

    </div>
    <!--列表-->

    <!--底部栏-->
    <div class="account bgcFFF" v-if="carList.length > 0">
      <!--结算-->
      <div class="account-box" v-if="!isEditor">
        <div class="account-l">
          <van-checkbox v-model="checkedAll"> 全选</van-checkbox>
          <span class="colorF54E4E flr">合计：￥{{priceTotal}}</span>
        </div>
        <div class="account-r text-c">
          <span :class="isPay ? 'is-pay' : ''" @click="handleToOrderConfirmation">去结算</span>
        </div>
      </div>
      <!--结算-->
      <!--编辑-->
      <div class="editor-box" v-if="isEditor">
        <p>
          <van-checkbox v-model="checkedAll"> 已选{{checkedNum}}件</van-checkbox>
          <span class="flr text-c" @click="handledDel">删除</span>
        </p>
      </div>
      <!--编辑-->
    </div>
    <!--底部栏-->
    <Tabbar  @tabberSelected="tabberSelected" :activeNum="active"></Tabbar>
    <Loading :show="isLoading"></Loading>
  </section>
</template>

<script type="text/ecmascript-6">
  import ProductCar from '../../components/ProductCar'
  import Tabbar from '../../components/Tabbar.vue'
  import { tabChange } from '../../assets/js/utils'
  import Loading from '../../components/Loading.vue'
  export default {
    components:{
      ProductCar,Tabbar,Loading
    },
    data () {
      return {
        active:2,
        isLoading:false,
        total:0,//购物车总数
        carList:[
          {
            id:1,
            src:'http://p3.qhimg.com/t01e2d49ba47d21192b.jpg',
            name:'商品名称商品名称',
            model:'xxxx',
            price:'80.00',
            number:1
          },
          {
            id:2,
            src:'http://p3.qhimg.com/t01e2d49ba47d21192b.jpg',
            name:'商品名称商品名称',
            model:'xxxx',
            price:'80.00',
            number:2
          },
//          {
//            id:3,
//            src:'http://p3.qhimg.com/t01e2d49ba47d21192b.jpg',
//            name:'商品名称商品名称',
//            model:'xxxx',
//            price:'80.00',
//            number:3
//          },
//          {
//            id:4,
//            src:'http://p3.qhimg.com/t01e2d49ba47d21192b.jpg',
//            name:'商品名称商品名称',
//            model:'xxxx',
//            price:'80.00',
//            number:3
//          }
        ],//商品列表数据
        checkedAll:false,//全选
        checkedAllIdList:[],//是否全选时传入的id数组
        checkedNum:0,//已选商品数量
        isEditor:false,//编辑
        editorText:'编辑',//编辑按钮文案
        priceTotal:0,//总价
        isPay:false,//结算按钮是否可点击
        resultList:[],//子组件返回的选中商品
      }
    },
    watch:{
      'resultList':function(newVal,oldVal){
        this.calculateTotal();
        this.checkedNum = newVal.length;
        this.isPay = newVal.length > 0 ? true : false;
        this.checkedAll = newVal.length == this.carList.length ? true : false;
      },
      'checkedAll':function(newVal,oldVal){
        this.checkedAllIdList = []
        if(newVal){
          for (let i = 0; i < this.carList.length; i++) {
            this.checkedAllIdList.push(this.carList[i].id)
          }
        }else if(this.resultList.length > 0 && this.resultList.length < this.carList.length){
          this.checkedAllIdList = this.resultList
        }else{
          this.checkedAllIdList = [];
        }
      },
    },
    created(){
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
      },1000)
    },
    methods: {
      tabberSelected(val){
        this.$router.push({
          path:tabChange(val),
        })
      },
      //编辑购物车
      handleEditorCar(){
        this.isEditor = !this.isEditor;
        this.editorText = this.isEditor ? '完成' : '编辑'
        if(!this.isEditor)this.checkedAllIdList = [];
      },
      //点击结算
      handleToOrderConfirmation(){
        this.$router.push({
          path:'/index/web/orderConfirmation',
        })
      },
      //点击删除
      handledDel(){
//        this.checkedAll = !this.checkedAll;
//        this.resultList
      },
      sendEditor(obj){
        this.resultList = obj.resultList
      },
      //减
      sendMinus(item){
        this.carList.forEach((value,index) => {
          if(value.id == item.item.id){
            if(value.number == 0){
              this.$toast('不能再减了');
            }else{
              value.number -= 1;
            }
          }
        });
        this.calculateTotal()
      },
      //加
      sendAdd(item){
        this.carList.forEach((value,index) => {
          if(value.id == item.item.id){
            value.number += 1;
          }
        });
        this.calculateTotal()
      },
      //计算总价
      calculateTotal(){
        this.priceTotal = 0;
        for (let i = 0,len = this.carList.length; i < len; i++) {
          for (let j = 0; j < this.resultList.length; j++) {
            if(this.resultList[j] == this.carList[i].id){
              this.priceTotal += Number(this.carList[i].price) * Number(this.carList[i].number);
            }
          }
        }
      },
      sendProductId(id){
        this.$router.push({
          path:'/index/web/product',
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/car';
</style>
